<template>
<!--    <div style="min-height: 100vh;overflow-x: hidden;" class="wrapper">-->
  <div class="wrapper">
         <!-- 回到顶部 -->
        <el-backtop target=".wrapper">
            <i class="el-icon-caret-top"></i>
        </el-backtop>
        
        <!-- 头部菜单 -->
        <Head aIndex="3"></Head>
          
        <!-- 内容 -->
          <div style="min-height:80vh;" >
              <div v-model="blogData" class="grid-content content bg-purple blog_bg " v-loading="loading">
                  
                  <el-row :gutter="20">
                      <el-col :span="12"><div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size:20px;">标签</div></el-col>
                      <el-col :span="12"><div style="float: right;margin: 10px 20px 0px 0px;font-size:20px;">共
                          <span style="font-size: 28px;color: rgb(6, 154, 240);">{{tags.length}}</span> 个</div></el-col>
                    </el-row>
                    
                    <div style="background-color: #DCDFE6;height: 1px;margin: 5px 0;"></div>
           
                      <el-button v-for="(tag,index) in tags"
                                 style="margin: 1% 0 1% 2%;"
                                 type="primary"
                                 plain
                                 @click="getTag(tag.id)" >
                        {{tag.name}}
<!--                        {{tag.countTag}}-->
                      </el-button>

                   <!-- 分割线 -->
                   <div  style="height:3px; margin: 5px 0; border:none; border-top:3px solid  #1eb9e0;"></div>
  
                <!-- 文章 -->
                <div>
                  <div style=" width: 95%; margin: 2%;" v-for="(item,index) in blogData" :key="index" >
  
<!--                  <router-link :to="'/blog/'+item.id">-->
                    <div @click="goToBlog(item.id)">
                   <el-card shadow="hover" :body-style="{ padding: '15px' }" >
                     <el-row :gutter="20">
                       <el-col :span="17">
                         <div>
                            <h4>{{item.title}}</h4>
                            <p style="font-size: 17px;">{{item.description}}</p>
  
                            <div v-lazy-container="{ selector: 'img' }">
<!--                             <el-avatar style="vertical-align:middle" :src="item.tuser.avatar"></el-avatar>-->
                              <img
                                  :data-src="item.tuser.avatar"
                                  style="width:45px;height:45px;border-radius: 50%;vertical-align:middle"
                              />
                             <span style="margin-left: 5px;">admin</span>
                             <i style="margin-left: 20px;" class="el-icon-date"><span style="font-size: 18px;"> {{item.createTime}}</span></i>
                             <i style="margin-left: 20px;" class="el-icon-view"><span style="font-size: 18px;"> {{item.views}}</span></i>
                             <i style="margin-left: 20px;" class="el-icon-chat-line-square"><span style="font-size: 18px;"> {{item.commentCount}}</span></i>
                            </div>
  
                         </div>
                       </el-col>
                       <el-col :span="7">
                         <div v-lazy-container="{ selector: 'img' }">
<!--                           <el-image -->
<!--                             style="width: 100%; height: 100%"-->
<!--                             :src="item.firstPicture" -->
<!--                             >-->
<!--                           </el-image>-->
                           <img
                               style="width: 200px; height: 115px"
                               :data-src="item.firstPicture"
                           />
                           <div style="margin-bottom: 10px;">
                             <el-tag style="margin-right: 10px;" ><span> {{item.flag}}</span></el-tag>
                             <el-tag style="margin-right: 10px;" type="success"><span > {{item.ttype.name}}</span></el-tag>
                             <el-tag style="margin-right: 10px;" type="info" v-for="tag in item.tblogTags"><span> {{tag.ttag.name}}</span></el-tag>
                            
                           </div>
                         </div>
                       </el-col>
                     </el-row>
                     
                   </el-card>
                    </div>
<!--                  </router-link>-->
  
                   <el-divider></el-divider>      
  
                  </div>
  
                  <div style="margin-left: 2%;padding-bottom: 2%;">
                      <!-- 分页 -->
                      <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="currentPage"
                      :page-size="size"
                      layout="total, prev, pager, next"
                      :total="total"
                      :key="key">
                      </el-pagination>
                  </div>
               </div>
              </div>
          </div>
  
        <Foot class="foot"></Foot>
    </div>
  </template>
  
  <script>
  import Head from '@/components/Head'
  import Foot from '@/components/Foot'
  export default {
    name: 'BlogTag',
    components:{ Head,Foot },
    data () {
     return {
       tags:[],
       tag_id:'',
       blogData:[],
       total:1,
       currentPage:1,
       size:5,
       source:"tag",
       page:1,
       idChange: false,
       key:0,
       loading: true
     }
    },
    mounted() {
      this.getAllTag()
      this.initBlog()
      this.key = this.$store.getters.getTagVal
    },
    methods:{
      //查询所有分类
      getAllTag(){
          const _this = this
          this.axios.get('/tag/getAllTag').then(resp=>{
              // console.log(resp)
              _this.tags = resp.data.obj
            if(this.$store.getters.getTagId == ''){ //第一次进入
              this.changeTagIdFun(resp.data.obj[0].id) //首次进入显示第一个分类的数据
            }
          })
      },
      //获取分类数据
      getTag(id){
        // console.log(id)
        this.tag_id = id
        this.changeTagIdFun(id)
        this.idChange = true //id发生了更改
        this.initBlog()
      },
      //初始化博客数据
      initBlog(){
        const _this = this
        // console.log(this.idChange)
        if(!this.idChange){ //还是原来的分类
          this.page = this.$store.getters.getTagVal //没改变分类请求原来的页码
          this.currentPage = this.$store.getters.getTagVal //当前页也返回原来页码
          // console.log(this.page,this.currentPage)
        }else{ //分类发生了改变
          this.page = 1
          this.currentPage = 1
          this.changeTagValFun(this.page)
        }

        this.axios.get('/blog/vuefindByPage?current=' + this.page + '&size=' + this.size + '&tags_id=' + this.$store.getters.getTagId + '&source=' + this.source).then(resp=>{
          // console.log(resp)
          _this.blogData = resp.data.obj.blogList
          _this.total = resp.data.obj.totals

          this.idChange = false //初始化完就变回false
          this.loading = false
        })
      },

      goToBlog(id){
        this.$router.push('/blog/'+id)
        this.changeSourceFun("tag")
      },

      // 翻页后滚动条回到页面顶端
      scrollTop(selector) {
        let element = selector && document.querySelector(selector) || window;
        element.scrollTo(0, 0);
      },

      //分页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        const _this = this
        this.loading = true
        this.axios.get('/blog/vuefindByPage?current=' + val + '&size=' + this.size + '&tags_id=' + this.$store.getters.getTagId + '&source=' + this.source).then(resp=>{
          // console.log(resp)
          this.loading = false
          _this.blogData = resp.data.obj.blogList
          // _this.total = resp.data.obj.totals

          //找到你想要滚到顶部的元素scrollTop=0
          this.scrollTop(".wrapper");

          this.changeTagValFun(val)
        })
      },

      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
      },

      //  改变store中tagVal的值
      changeTagValFun(val){
        this.$store.dispatch("changeTagValFun",val)
      },

      // 改变store中source的值
      changeSourceFun(source){
        this.$store.dispatch("changeSourceFun",source)
      },

      //  改变store中tagId的值
      changeTagIdFun(id){
        this.$store.dispatch("changeTagIdFun",id)
      },
    }
  }
  </script>
  
  <style scoped>
      .blog_bg{
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          width: 60%;
          margin-top: 5% !important;
          margin-bottom: 5% !important;
          margin: auto;
          min-height: 500px;
      }

      @media screen and (max-width: 800px){
        .blog_bg{
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          width: 90%;
          margin-top: 5% !important;
          margin-bottom: 5% !important;
          margin: auto;
          min-height: 500px;
        }
      }

      .foot{
        width: 100%;
      }
  </style>